<template>
	<view class="proList">
		<view class="listType" @click="showCard1(item)" v-for="(item,index) in list" :key="index">
			<view class="left_type">
				<view class="down">
					<view class="">
						优惠价
					</view>
					<view class="">
					</view>
				</view>
				<view class="type_name">
					<text>{{item.name}}</text>
					<view class="jc-sb">
						<view class="f-row">
							<view class="down_price">
								¥{{item.actual_payment}}
							</view>
							<view class="price">
								原价¥{{item.price}}
							</view>
						</view>
						<view class="f-row goNear" @click.stop="showCard1(item)">
							<image src="../../static/images/index/btnBg.png" mode="widthFix"
								style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
							<view class="">
								前往购买
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noMore" v-if="last_page==form.page&&list.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
			数据加载完成
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="list.length==0" margin-top='50'></u-empty>
		<productDetailsCard :showPop="showproCard" @refuse="refuse1" @submit="subNearCar1" :title='bottomTip1'
			:proDetails='proDetails'>
		</productDetailsCard>
	</view>
</template>

<script>
	import {
		goodsList,
		goodsDetails
	} from '@/request/api.js'
	import productDetailsCard from "@/components/index/productDetailsCard.vue"
	export default {
		components: {
			productDetailsCard
		},
		data() {
			return {
				showproCard: false,
				bottomTip1: '商品详情',
				proDetails: null,
				list: [],
				form: {
					page: 1,
					id: ""
				},
				last_page: 1,
			}
		},
		onReachBottom() {
			// console.log(111)
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getList()
			}
		},
		onLoad(res) {
			this.form.page = 1
			this.form.id = res.id
			this.list = []
			this.getList()
		},
		methods: {
			async showCard1(e) {
				let id = e.id
				let res = await goodsDetails({
					id
				})
				this.proDetails = res.data
				console.log(res, '商品详情')
				this.showproCard = true;
			},
			refuse1() {
				this.showproCard = false
			},
			async getList() {
				let res = await goodsList(this.form)
				this.list = this.list.concat(res.data.data)
				this.last_page = res.data.last_page
				// console.log(this.list, 'list')
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-swiper {
		width: 100% !important;
	}

	.proList {
		padding: 20rpx;
		height: 100vh;

		.listType {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #2CB9A4;
			padding-bottom: 20rpx;
			border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
			margin-top: 20rpx;

			.left_type {
				display: flex;
				align-items: center;
				width: 100%;

				.type_name {
					color: #000;
					font-size: 30rpx;
					font-weight: 600;
					margin-left: 15rpx;
					flex: 1;

					.f-row {
						display: flex;
						align-items: flex-end;
					}

					.goNear {
						background: #2CB9A4;
						color: #fff;
						/* height: 60rpx; */
						justify-content: center;
						align-items: center;
						border-radius: 10rpx;
						padding: 8rpx 20rpx;
						font-size: 24rpx;
						align-items: center;
					}
				}
			}

			.down {
				color: #2CB9A4;
				justify-content: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10rpx;
				font-size: 22rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
				background: #C0EAE4;
				width: 70rpx;
			}

			.down_price {
				margin-right: 20rpx;
				font-size: 28rpx;
				color: #FF6666;
			}

			.price {
				margin-right: 10rpx;
				font-size: 24rpx;
				text-decoration-line: line-through;
				color: #BABABA;
				font-weight: 400;
			}
		}
	}
</style>